<template>
  <div>
    <loading-view ref="loading" :data="userInfo">
      <div class="shareBackView">
        <img class="imgView" src="/web-hft-ee/static/img/university/member_invite_bg.png"/>
        <div class="cardView" v-if="userInfo">
          <p class="nameLabel ellipsis2">{{teamInfo.enterpriseName}}</p>
          <img class="headView" :src="userInfo.pic"/>
          <p class="creatorLabel">邀请人：{{userInfo.nickname || "xxx"}}</p>
          <van-button type="default" class="joinBtn" @click="joinClick">
            加入团队
          </van-button>

        </div>
        <div class="bottomView">
          <p class="bottomLabel">技术支持：</p>
          <img class="bottomIcon" src="/web-hft-ee/static/img/university/member_invite_logo.png">
        </div>
      </div>

    </loading-view>

  </div>
</template>

<script>

  import TeamAPI from '@/repo/api/TeamAPI'
  import UserAPI from '@/repo/api/UserAPI'
  import LoadingView from '@/components/LoadingView'
  // import Vue from 'vue'
  import {Button, Toast, Dialog} from 'vant'
  import {userActionsTypes} from "@/repo/store/user";

  Vue.use(Button);

  export default {
    name: "invite-share",
    data() {
      return {
        userInfo: null,
        teamInfo: null
      }
    },
    components: {
      LoadingView
    },
    mounted() {

      history.pushState(null, null, document.URL);
      window.onpopstate = this.popstate;
      this.getUserInfo()
    },
    methods: {

      getUserInfo() {

        Promise.all([UserAPI.getTargetUserInfo(this.$route.params.userId), TeamAPI.getSharePageTeamInfo(this.$route.params.teamId, this.$route.params.rec)]).then((res) => {
          this.userInfo = res[0].responseData
          this.teamInfo = res[1].responseData.enterprise
        }).catch((err) => {
          let errInfo = err.result[0] || {}
          this.$refs.loading.showError(errInfo.resultInfo)
        })
      },
      joinClick() {
        let nickname = this.$store.getters.userNickname
        TeamAPI.joinTeam(this.$route.params.rec, nickname).then((res) => {
          Toast('加入成功')
          this.$store.dispatch(userActionsTypes.FETCH_ENTERPRISE_INFO).then(() => {
            this.$_router.replace('/')
          })
        }).catch((error) => {
          let result = error.result
          if (result[0].resultCode === 28) {
            let enterpriseInfo = this.$store.getters.enterpriseInfo.enterprise || {}
            if (enterpriseInfo.id == this.$route.params.teamId) {
              this.$_router.replace('/')
            } else {
              Dialog.confirm({
                title: '提醒',
                message: '您已加入团队，若需加入当前团队，可前往企业大学退出团队',
                confirmButtonText: '前往企业大学'
              }).then(() => {
                this.$_router.replace('/')
              })
            }
          }
        })
      },
      //返回页面时监听
      popstate(e) {
        history.pushState(null, null, document.URL);
      },
    }

  }
</script>

<style scoped>
  .shareBackView {
    position: relative;
  }

  .imgView {
    width: 100%;

  }

  .cardView {
    top: 15%;
    position: absolute;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.20);
    left: 40px;
    right: 40px;
    width: calc(100% - 80px);
    text-align: center;
  }

  .nameLabel {
    padding: 0 8px;
    margin-top: 40px;
    font-size: 24px;
    font-weight: bold;
    color: #323334;
  }

  .headView {
    margin-left: calc(50% - 32px);
    margin-top: 40px;
    width: 64px;
    height: 64px;
    border-radius: 32px;
  }

  .creatorLabel {
    margin-top: 8px;
    font-size: 16px;
    font-weight: bold;
    color: #323334;
  }

  .joinBtn {
    margin-top: 50px;
    margin-bottom: 50px;
    background-image: linear-gradient(225deg, #3ECFFA 0%, #1DA1F2 100%);
    width: 180px;
    color: white;
    height: 48px;
    border-radius: 24px;
    font-size: 16px;
  }

  .bottomView {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 16px;
  }

  .bottomLabel {
    font-size: 14px;
    color: #98999E;
    font-weight: bold;
  }

  .bottomIcon {
    width: 39px;
  }
</style>
